<template>
  <div class="M-SheetList">
    <div class="img">
      <img :src="sheetLists.picUrl" alt="" />

      <div class="fre">
        <i class="iconfont icon-bofang1"></i><span> {{ get }} </span>
      </div>
    </div>
    <p>{{ sheetLists.name }}</p>
  </div>
</template>

<script>
export default {
  props: {
    sheetLists: Object,
  },
  computed: {
    get() {
      let nums = (this.sheetLists.playCount / 10000).toFixed(1) + "万";
      return nums;
    },
  },
};
</script>

<style lang="scss" scoped>
.M-SheetList {
  width: 32%;
  height: 700px;
  position: relative;
  margin-right: 40px;
  .img {
    img {
      width: 453px;
      height: 453px;
      border-radius: 33px;
    }
  }
  .fre {
    text-align: center;
    position: absolute;
    bottom: 253px;
    right: 0px;
    color: #fff;
    background: #080b0d;
    border-radius: 15px;
    padding: 0 20px;
    opacity: 0.7;
    i,
    span {
      font-size: 12px;
    }
  }
  p {
    font-size: 66px;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box; 
    -webkit-line-clamp:2; 
    -webkit-box-orient:vertical;
    display: -moz-box; 
    -moz-line-clamp:2; 
    -moz-box-orient:vertical;
    word-wrap: break-word; 
    word-break: break-all; 
    white-space: normal;
  }
}
</style>